'use strict';

import React, { Component } from 'react';

import {
  View,
  WebView,
  ScrollView,
  Text,
  TouchableOpacity,
  Platform,
  Image,
  StyleSheet
} from 'react-native';

import Config from '../../config';
import {DateUtils, HtmlUtils} from '../../utils/Utils';
import SizeUtils from '../../common/SizeUtils';

const RESPORTARR=[{type:0,name:'辱骂或挑衅'},
      {type:1,name:'非法信息'},{type:2,name:'谣言'},
      {type:3,name:'抄袭'},{type:4,name:'泄露隐私信息'},
      {type:5,name:'侵权'},{type:6,name:'内容低俗'},
      {type:7,name:'欺诈诽谤'},{type:8,name:'色情暴力'},
      {type:9,name:'恶意营销'},{type:10,name:'人身攻击'},]
class ResportView extends Component {
  constructor(props) {
    super(props);
    this.state={
      select_index:RESPORTARR[0].type 
    }
  }
  _renderConent(){
    var list = [];
    for (var i = 0; i < RESPORTARR.length; i++) {
     const item = RESPORTARR[i];
     list.push(
              <TouchableOpacity key={i} onPress={()=>{
                this.setState({
                  select_index:item.type 
                });
              }}
                style={{
                  width:(SizeUtils.getWindowSize().width-SizeUtils.translateDesignWidthToCode(220))/3,
                  height:SizeUtils.translateDesignHeightToCode(60),
                  marginLeft:SizeUtils.translateDesignWidthToCode(30),
                  marginBottom:SizeUtils.translateDesignHeightToCode(30),
                  borderRadius:SizeUtils.translateDesignHeightToCode(60),
                  borderWidth:0.5,
                  borderColor:this.state.select_index===item.type?'#ee3535':'#999',
                  justifyContent: 'center',alignItems: 'center',
                  flexDirection:'row',
              }}>
                <Text style={{color:this.state.select_index===item.type?'#ee3535':'#999',
                  fontSize:SizeUtils.translateFontSizeToCode(26)}}>
                  {item.name}
                </Text>
              </TouchableOpacity>
            )
    }
    return list;
  }
  render() {
    return (
      <View style={{flex:1,padding:6}}>
        <View style={{flexDirection:"row",justifyContent:'space-between',alignItems: 'center',}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(36),
            }}>请选择举报原因
          </Text>
          <TouchableOpacity onPress={()=>{
            const item = RESPORTARR[this.state.select_index];
            this.props.popoverPress&&this.props.popoverPress({type:item.type,reason:item.name})
          }}
            style={{
              width:SizeUtils.translateDesignWidthToCode(160),
              height:SizeUtils.translateDesignHeightToCode(60),
              marginLeft:SizeUtils.translateDesignWidthToCode(40),
              backgroundColor:'#ee3535',
              borderRadius:SizeUtils.translateDesignHeightToCode(60),
              borderWidth:0.5,
              borderColor:'#ee3535',
              justifyContent: 'center',alignItems: 'center',
              flexDirection:'row',
            }}>
            <Text style={{marginLeft:5,color:'#fff',
              fontSize:SizeUtils.translateFontSizeToCode(30)}}>
              {'确定举报'}
            </Text>
          </TouchableOpacity>
        </View>
        <View style={{marginTop:SizeUtils.translateDesignHeightToCode(30),flex:1,flexDirection:'row',flexWrap:'wrap',}}>
          {this._renderConent()}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({

});


export default ResportView;